<template>
    <div class="component-container">
        <div class="grid-container">
            <el-table
                ref="datagrid"
                :data="table.data"
                border
                style="width: 100%; height: 400px"
                @row-click="handleClickTableRow"
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="eventType" label="类型" :formatter="typeFmt" width="100" />
                <el-table-column prop="eventDesc" label="事件" show-overflow-tooltip />
                <el-table-column prop="createBy" label="申请/操作人" width="120" />
                <el-table-column prop="createTime" label="日期" width="160" :formatter="formatUtil.gridDateFormat" />
            </el-table>
        </div>
        <!-- <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="table.pagination.currentPage" :page-sizes="table.pagination.pageSizes" :page-size="table.pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="table.pagination.total">
            </el-pagination>
        </div> -->
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'

const props = defineProps({
    deviceId: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['select'])

const datagrid = ref(null)

const table = reactive({
    data: [],
    selected: [],
    pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0
    }
})

const handleSelectionChange = (val) => {
    table.selected = val
}

const handleSizeChange = (val) => {
    table.pagination.pageSize = val
    loadData()
}

const handleCurrentChange = (val) => {
    table.pagination.currentPage = val
    loadData()
}

const handleClickTableRow = (row) => {
    if (props.single) {
        datagrid.value.clearSelection()
    }
    datagrid.value.toggleRowSelection(row)
}

const loadData = () => {
    let params = {
        deviceId: props.deviceId,
        page: table.pagination.currentPage,
        pageSize: table.pagination.pageSize
    }
    http.fetchForm({
        url: '/yunying/device/queryHistoryGrid',
        data: params
    }).then((res) => {
        table.data = res.data.grid
        table.pagination.total = res.data.total
    })
}

const typeFmt = (row, column, cellValue, index) => {
    let data = row[column.property]
    let operation = ''
    switch (data) {
        case 'purchase':
            operation = '采购'
            break
        case 'dispatch':
            operation = '调度'
            break
        case 'maintain':
            operation = '维修'
            break
        case 'discard':
            operation = '作废'
            break
        default:
            operation = '未知'
    }
    return operation
}

const reset = () => {
    query.employeeNo = ''
    query.name = ''
    query.departmentName = ''
    loadData()
}

const doSub = () => {
    let selected = table.selected
    if (selected.length == 0) {
        ElNotification({
            title: '提示',
            message: '请选择',
            type: 'info'
        })
        return
    }
    emit('select', selected)
}

// mounted
onMounted(() => {
    loadData()
})
</script>
<style scoped>
.component-container {
    width: 100%;
}

.grid-form-container {
    width: 100%;
}

.search {
    display: flex;
}

.search-input-class {
    width: 120px;
    margin-right: 10px;
}

.pagination-container {
    padding: 10px;
}
</style>
